<template>
  <el-upload
      class="avatar-uploader"
      action="http://localhost:8080/upload"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>

  <el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="编号">
      <el-input v-model="form.id" disabled/>
    </el-form-item>
    <el-form-item label="姓名">
      <el-input v-model="form.name"/>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.password"/>
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="form.gender">
        <el-radio value="男">男</el-radio>
        <el-radio value="女">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="生日">
      <el-col :span="11">
        <el-date-picker
            v-model="form.birthday"
            type="date"
            placeholder="请选择日期"
            style="width: 100%"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model="form.age"/>
    </el-form-item>
    <el-form-item label="年级">
      <el-select v-model="form.classInfo.id" placeholder="请选择年级">
        <el-option v-for="item in classInfoList" :value="item.id">
          {{ item.name }}
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<script>

import {queryById, update} from "../api/user.js";
import {queryAllClass} from "../api/class.js";

export default {
  name: "UserUpdate",
  props: ["id"],
  data() {
    return {
      form: {
        "name": "",
        "password": "",
        "gender": "",
        "birthday": "",
        "age": '',
        "classId": "",
        "classInfo": {
          "name": ""
        },
        "imgSrc":""
      },
      classInfoList:[],
      imageUrl:""
    }
  },
  methods: {
    async onSubmit(){
      let {data:data} = await update(this.form)
      console.log(data)
    },
    async queryById(){
      let {data:data} = await queryById(this.$props.id)
      console.log(data)
      this.form = data
    },
    async queryAllClass(){
      let {data:data} =await queryAllClass()
      console.log(data)
      this.classInfoList = data
    },
    handleAvatarSuccess(response){
      console.log(response)
      this.form.imgSrc = response.imgSrc
      this.imageUrl = response.url
    },
    beforeAvatarUpload(){

    }
  },
  watch:{
    id(newVal,oldVal){
      console.log(oldVal,newVal)
      this.queryById(newVal)
    }
  },
  mounted() {
    this.queryById()
    this.queryAllClass()
  }
}

</script>

<style>

</style>